<template>
    <div class="flex" :style="'height: '+windowHeight+'px;'">
        <!--左侧绝对定位悬浮-->
        <div style="position: fixed;z-index: 999;background-color: #EBEAEA;"
             :style="'height:'+windowHeight+'px;'"
             class="flex flex-column align-center justify-between"
             :class="leftTabBarWidthFlag?'changeLeftTabBarWidth':'recoverLeftTabBarWidth'"
             @mouseenter="changeLeftTabBarWidth"
             @mouseleave="recoverLeftTabBarWidth">
            <div class="flex flex-column">
                <div class="flex" style="height: 65px;">

                </div>
                <div ref="home" class="flex flex-column align-center"
                     style="height: 80px;cursor: pointer;"
                     @click="toPage('home')"
                     @mouseenter="activeCSS('home')"
                     @mouseleave="recoverCSS('home')">
                    <span class="icon iconfont icon-shouye" style="font-size: 25px;color: #515A6E;"></span>
                    <span v-show="leftTabBarWidthFlag" style="font-size: 13px;color: #515A6E;">首页</span>

                </div>
                <div ref="channel" class="flex flex-column align-center"
                     style="height: 80px;cursor: pointer;"
                     @click="toPage('channel')"
                     @mouseenter="activeCSS('channel')"
                     @mouseleave="recoverCSS('channel')">
                    <span class="icon iconfont icon-dongtai" style="font-size: 25px;color: #515A6E;"></span>
                    <span v-show="leftTabBarWidthFlag" style="font-size: 13px;color: #515A6E;">动态</span>
                </div>
                <div ref="msg" class="flex flex-column align-center"
                     style="height: 80px;cursor: pointer;"
                     @click="toPage('msg')"
                     @mouseenter="activeCSS('msg')"
                     @mouseleave="recoverCSS('msg')">
                    <span class="icon iconfont icon-xiaoxi" style="font-size: 25px;color: #515A6E;"></span>
                    <span v-show="leftTabBarWidthFlag" style="font-size: 13px;color: #515A6E;" >消息</span>
                </div>
                <div ref="user" class="flex flex-column align-center"
                     style="height: 80px;cursor: pointer;"
                     @click="toPage('user')"
                     @mouseenter="activeCSS('user')"
                     @mouseleave="recoverCSS('user')">
                    <span class="icon iconfont icon-ziyuan" style="font-size: 25px;color: #515A6E;"></span>
                    <span v-show="leftTabBarWidthFlag" style="font-size: 13px;color: #515A6E;">我的</span>

                </div>
            </div>
            <div class="flex flex-column" style="margin-top: 130px;margin-bottom: 130px;">
                <div class="flex flex-column align-center" style="height: 50px;cursor: pointer;">
                    <span style="font-size: 20px;" class="icon iconfont icon-xiangshang"></span>
                </div>
                <div class="flex flex-column align-center" style="height: 50px;cursor: pointer;">
                    <span style="font-size: 13px;">反馈</span>
                </div>
                <div class="flex flex-column align-center" style="height: 50px;cursor: pointer;">
                    <span style="font-size: 13px;">微信</span>
                </div>
                <div class="flex flex-column align-center" style="height: 50px;cursor: pointer;">
                    <span style="font-size: 13px;">APP</span>
                </div>
            </div>
        </div>
        <!--左侧占位-->
        <!--<div style="width: 45px;" :style="'height: '+windowHeight+'px;'" class="flex flex-column align-center justify-center">-->

        <!--</div>-->
        <!--右-->
        <div class="flex align-center justify-center" :style="'height: '+windowHeight+'px;'">
            <router-view/>
        </div>

    </div>

</template>

<script>
    export default {
        name: "product",
        data() {
            return {
                current:0,
                listMouseEventBgColor:'background-color: #3A3C42;',
                windowHeight:document.documentElement.clientHeight,
                windowWidth:0,
                leftTabBarWidthFlag: false,
                token:''
            }
        },
        computed:{
            leftTabBarWidthStyles(){

            }
        },
        mounted:function(){
            this.windowHeight = document.documentElement.clientHeight;
            this.windowWidth = document.documentElement.clientWidth;
            console.log(this.windowHeight);

            //加载首页
            // this.$router.push({name:'login', query:{id: 3}});
            this.$router.push({name:'home'});
            // 关闭浏览器窗口的时候清空浏览器缓存在localStorage的数据
            window.onbeforeunload = function (e) {
                let storage = window.localStorage;
                storage.clear();
            }
        },
        destroyed:function(){
            localStorage.removeItem('accessToken');
            // localStorage.removeItem('');
            // localStorage.removeItem('');
            // localStorage.removeItem('');
        },
        methods:{
            checkToken:function(){
                // localStorage.setItem('accessToken', 'Bearer ' + response.data.result.accessToken)
                let token = localStorage.getItem('accessToken');//null
                console.log(token)
                if(token!=null){
                    return true;
                }
                return false;
            },
            changeLeftTabBarWidth:function(){
                // 'height: '+windowHeight+'px;width:'+leftTabBarWidthFlag?'65px;':'45px;'
                this.leftTabBarWidthFlag = true;
            },
            recoverLeftTabBarWidth:function(){
                this.leftTabBarWidthFlag = false;
            },
            toPage(pageName){
                if(this.checkToken()){
                    this.$router.push({name:pageName});
                }else {
                    this.$router.push({name:'login'});
                }
            },
            activeCSS(ref){
                // console.log(this.$refs[ref].children[0].style.color);
                this.$refs[ref].children[0].style.color = '#FF8140';
                this.$refs[ref].children[1].style.color = '#FF8140';
                // this.$refs[ref].style.backgroundColor = '#FF8140';
            },
            recoverCSS(ref){
                this.$refs[ref].children[0].style.color = '#515A6E';
                this.$refs[ref].children[1].style.color = '#515A6E';
                // this.$refs[ref].style.backgroundColor = '#EBEAEA';
            }


        }
    }
</script>

<style scoped>
    .changeLeftTabBarWidth{
        width: 65px;
    }
    .recoverLeftTabBarWidth{
        width: 45px;
    }
</style>
